{include file="public/header296" /}
<div class="layui-fluid">
  <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="padding-top: 10px;">
        <!-- 搜索 -->
        <div class="layui-form-item">
          <div class="layui-inline">
            <div class="layui-input-inline">
              <input type="text" name="start_date" id="start_date" placeholder="查询开始" autocomplete="off" class="layui-input" />
            </div>
            <div class="layui-input-inline">
              <input type="text" name="end_date" id="end_date" placeholder="查询结束" autocomplete="off" class="layui-input" />
            </div>
            <div class="layui-input-inline">
              <input type="text" name="order_sn" placeholder="请输入订单编号" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
              <input type="text" name="demand_id" placeholder="需求id(关联需求id)" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
              <input type="text" name="user_id" placeholder="需求方id" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="layui-card-body">
        <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
        <script type="text/html" id="table-content-list">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" title="详情">详情</a>
        </script>
      </div>
  </div>
</div>
<style>
  .layui-table .layui-table-cell{
    height: auto;
    line-height: 42px;
    max-width: 100%;
  }
</style>
<script>
  layui.use(['layer', 'table','laydate'], function(){
    var $ = layui.$
            ,table = layui.table
            ,laydate = layui.laydate
            ,form = layui.form;
    // 日期
    laydate.render({
      elem: '#start_date'
      , trigger:'click'
    });
    laydate.render({
      elem: '#end_date'
      , trigger:'click'
    });

    table.render({
      elem: '#LAY-app-content-list'
      , url: "{:url('order/getOrderList')}"
      , request: {
        pageName: 'page',
        limitName: 'page_size'
      }
      , page: {
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
        , first: '首页'
        , last: '尾页'
        , limit: 10
      }
      , toolbar:true
      , totalRow: true
      , cellMinWidth: 100
      , cols: [[
        {field: 'id',type: 'checkbox'}
        , {field: 'nickname', title: '用户'}
        , {field: 'avatar', title: "头像", width: 80, align:'center', templet: function (d) {
          if (d.avatar != '') {
            str = '<div id="layer-photos-cover-'+ d.id +'" class="layer-photos-demo">';
            str +='<img layer-src="'+ d.avatar +'" width="40" height="40" src="' + d.avatar + '"><\/div>';
            return str;
          } else{
            return '';
          }
        }}
        , {field: 'create_time', title: '订单时间', width: 181, align:'center'}
        , {field: 'order_name', width: 150, title: '订单名称', align:'center'}
        , {field: 'nickname', title: '需求方', align:'center'}

        , {field: 'order_sn', title:'订单编号', align:'center'}
        , {field: 'transaction_id', title:'交易单号',align:'center'}
        , {field: 'amount', title: '订单总额', align:'center',}
        , {field: 'pay_amount',align:'center', title: '支付金额'}
        , {field: 'pay_balance', title: '余额支付', align:'center'}
        , {field: 'pay_type', title: '支付方式', align:'center', templet: function (d) {
          if (d.pay_type == 1) {
            return '<button class="layui-btn layui-btn-xs">微信</button>'
          } else if(d.pay_type == 2) {
            return '<button class="layui-btn layui-btn-xs ">余额</button>'
          } else if(d.pay_type == 3) {
            return '<button class="layui-btn layui-btn-xs">微信+余额</button>'
          } else {
            return '';
          }
        }}
        , {field: 'status', align:'center', title: '支付状态', templet: function (d) {
            if (d.status == 1) {
              return '<button class="layui-btn layui-btn-xs layui-btn-radius">已支付</button>'
            } else if(d.status == 2) {
              return '<button class="layui-btn layui-btn-xs layui-btn-warm layui-btn-radius">取消支付</button>'
            } else if(d.status == -1) {
              return '<button class="layui-btn layui-btn-xs layui-btn-danger layui-btn-radius">支付失败</button>'
            } else {
              return '';
            }
        }}
        , {field: 'payment_at', title: '支付时间', width: 181, align:'center'}
        , {title: '操作', width: 100, align: 'center', fixed: 'right', toolbar: '#table-content-list'}
      ]]
      , text: {
        none: '暂无相关数据'
      }
      , done: function () {
        hoverOpenImage();
      }
    });
    form.on('submit(LAY-app-contlist-search)', function(data){
      var field = data.field;
      table.reload('LAY-app-content-list', {
        page: {
          curr: 1
        }
        , where: field
      });
    });

    function hoverOpenImage(){
      var img_show = null;
      $('td img').hover(function(){
        var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:275px;' />";
        img_show = layer.tips(img, this,{
          tips:[1, '#000']
          , area: ['300px', '290px']
          , maxWidth: 300
        });
      },function(){
        layer.close(img_show);
      });
    }

    // 监听工具条，编辑
    table.on('tool(LAY-app-content-list)', function(obj){
      var data = obj.data;
      if(obj.event == 'edit') {
        var index = layer.open({
          type: 2
          , title: '订单详情'
          , content: "{:url('order/detail')}?id=" + data.id
          , maxmin: true
          , area: ['90%', '90%']
          , shade: 0.7
          , shadeClose: true
          , btn: ['确定', '取消']
          , yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submit = layero.find('iframe').contents().find("#Lay-app-form-edit");

            iframeWindow.layui.form.on('submit(Lay-app-form-edit)', function(data){
              var field = data.field;
              layer.closeAll();
            });
            submit.trigger('click');
          }
        });
        //layer.full(index);
      }
    });

    var $ = layui.$, active = {

    };

    $('.layui-btn.layuiadmin-btn-list').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>
{include file="public/footer"}